<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>login</title>
    <link rel="stylesheet" href="/layui/css/layui.css">
    <script src="/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
    <style>
        body{
            background-position: center center;
            background-size: cover;
            background-repeat: no-repeat;
            background-attachment: fixed;
            background-color: #00F7DE;
        }
        .loginForm{

            background-color: white;
            padding: 30px 20px;
            box-shadow: 0 0 5px black;
            box-sizing: border-box;
            margin-top: 5%;
        }

    </style>
</head>
<body>
<div class="layui-container">
    <div class="layui-row" style="margin-top: 12%">
        <div class="layui-col-md4 layui-col-md-offset4">
            <h1 align="center" ><b>FBS&nbsp;</b>JOB</h1>
            <div class="loginForm">
                <h3 align="center">任务调度管理平台</h3>
                <form class="layui-form" >
                    <div class="layui-form-item">
                        <label>用户名:</label>
                        <div class="layui-form-block">
                            <input type="text" name="username" required lay-verify="required"
                                   placeholder="请输入用户名" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label>密码:</label>
                        <div class="layui-form-block">
                            <input type="password" name="password" required lay-verify="required"
                                   placeholder="请输入密码" class="layui-input">

                        </div>
                    </div>


                    <div class="layui-row" style="vertical-align: middle;">
                        <div class="layui-col-xs6" style="text-align: left;margin-top: 10px">
                            <input type="checkbox" name="ifRemember" lay-skin="primary"  title="记住密码" >
                        </div>
                        <div class="layui-col-xs6" style="text-align: right">
                            <button class="layui-btn" lay-submit lay-filter="loginForm">登录</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<script>
    layui.use('form', function(){
        var form = layui.form; //只有执行了这一步，部分表单元素才会自动修饰成功
        //……
        $ = layui.$;
        //如果你的 HTML 是动态生成的，自动渲染就会失效
        //因此你需要在相应的地方，执行下述方法来进行渲染
        form.render();


        //监听提交
        form.on('submit(loginForm)', function(data){
            layer.msg(JSON.stringify(data.field));

            $.ajax({
                url: '/login',
                type: 'post',
                async: false,
                data:JSON.stringify(data.field),
                contentType: 'application/json;charset=UTF-8',
                success: function (data) {
                   console.log('----------back-----111-',data)
                    if (data.code == "200") {

                        console.log('----------backdata------',data.code)
                        layer.msg('登录成功');
                        setTimeout(function(){
                            window.location.href =   "/";
                        }, 500);
                    } else {
                        layer.open({
                            title: data.message,
                            btn: [ '确认' ],
                            content: (data.message || '登录失败' ),
                            icon: '2'
                        });
                    }

                },
                error: function (error) {

                }
            })
            return false;
        });

    });

</script>
</body>
</html>
